<template>
    <div class="home">
        <header>
            <router-link to="/code" class="code-btn iconfont icon-shouye15"></router-link>
            <div class="search-row"><input type="text" class="search-input" placeholder="输入关键字"></div>
            <router-link to="/message" class="message-btn iconfont icon-shouye30"></router-link>
        </header>
        <section class="home-body">
            <!--swiper-->
            <swiper :list="list"></swiper>
        </section>
        <footer>
            
        </footer>
        <loading :shown="shown"></loading>
    </div>
</template>
<script>
    import loading from '../../components/Loading/loading.vue';
    import swiper from '../../components/Swiper/swiper.vue';
    export default {
        name: 'Home',
        data() {
            return {
                shown: true,
                list: []
            }
        },
        created() {
            let self = this;
            let list = [
                {"image": "", "text": ""}, 
                {"image": "", "text": ""},
                {"image": "", "text": ""}
            ]
            setTimeout(function() {
                self.shown = false;
            }, 2000);
        },
        components: {
            loading,
            swiper
        }
    }
</script>
<style lang="scss">
    @import '../../res/scss/default.scss';
    .home {
        header {
            width: 100%;
            height: 1rem;
            background: $red;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
            .search-row {
                width: 100%;
                .search-input {
                    box-sizing: border-box;
                    padding: 15px;
                    font-size: 24px;
                    width: 100%;
                    height: 70%;
                    border-radius: 5px;
                }
            }
            .code-btn {
                margin: 0 15px;
            }
            .message-btn {
                margin: 0 15px;
            }
            .iconfont {
                color: $white;
                font-size: 28px;
            }
        }
    }
</style>